<template>
  <div class="password-strength-meter">
    <div class="strength-bar" :class="strengthClass"></div>
    <div class="strength-text">{{ strengthText }}</div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  password: {
    type: String,
    default: ''
  }
})

const strength = computed(() => {
  if (!props.password) return 0

  let score = 0

  // 长度评分
  if (props.password.length > 0) score += 1
  if (props.password.length >= 8) score += 1

  // 复杂度评分
  if (/[a-z]/.test(props.password)) score += 1
  if (/[A-Z]/.test(props.password)) score += 1
  if (/\d/.test(props.password)) score += 1
  if (/[^a-zA-Z0-9]/.test(props.password)) score += 1

  return Math.min(5, score)
})

const strengthClass = computed(() => {
  if (strength.value <= 2) return 'weak'
  if (strength.value <= 4) return 'medium'
  return 'strong'
})

const strengthText = computed(() => {
  if (!props.password) return ''

  switch (strengthClass.value) {
    case 'weak': return '密码强度：弱'
    case 'medium': return '密码强度：中等'
    case 'strong': return '密码强度：强'
    default: return ''
  }
})
</script>

<style scoped>
.password-strength-meter {
  width: 100%;
  margin-top: 8px;
}

.strength-bar {
  height: 6px;
  border-radius: 3px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.strength-bar.weak {
  width: 33%;
  background-color: #ff4d4f;
}

.strength-bar.medium {
  width: 66%;
  background-color: #faad14;
}

.strength-bar.strong {
  width: 100%;
  background-color: #52c41a;
}

.strength-text {
  font-size: 12px;
  color: #666;
  text-align: left;
}
</style>